<section class="page_section" id="works">
    <!-- section header -->
    <header>
        <div class="container">
            <h1>魔岩主题</h1>
            <p>个性定制，与众不同，如你所愿。</p>
        </div><!-- end .container -->
    </header>
    <!-- //section header -->  
              
    <!-- section content -->
    <div class="content_section container">
    	<!-- filter_block -->
        <div class="filter_block">
            <div class="filter_navigation">
                <ul id="options" class="splitter">
                    <li>
                        <ul data-option-key="filter" class="optionset">
                            <li class="selected"><a data-option-value="*" href="#filter">All works</a></li>
                            <li><a title="View all post filed under Portraits" data-option-value=".portraits" href="#filter">Portraits</a></li>
                            <li><a title="View all post filed under Fashion" data-option-value=".fashion" href="#filter">Fashion</a></li>
                            <li><a title="View all post filed under Stories" data-option-value=".stories" href="#filter">Stories</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- .filter_navigation -->
        </div>
        <!-- //filter_block -->
        <div class="row">
            <!-- Portfolio -->
            <div class="portfolio_block image-grid" id="list">                                                                    
                <div class="portraits element col-md-4">
                	<div class="portfolio_item_wrapper">
                        <div class="img_block hover_img">
                            <a href="single_portfolio.html">
                                <img src="static/images/portfolio/1.jpg" alt="" />
                                <div class="item_fadder"></div>
                                <div class="link_ico"><i class="fa fa-link"></i></div>
                            </a>
                        </div>
                        <h3 class="gallery_title"><a href="single_portfolio.html">Tincidunt Pharetra</a></h3>
                	</div>
                </div><!-- .element -->
                <div class="fashion element col-md-4">
                	<div class="portfolio_item_wrapper">
                        <div class="img_block hover_img">
                            <a href="single_portfolio.html">
                                <img src="static/images/portfolio/2.jpg" alt="" />
                                <div class="item_fadder"></div>
                                <div class="link_ico"><i class="fa fa-link"></i></div>
                            </a>
                        </div>
                        <h3 class="gallery_title"><a href="single_portfolio.html">Accumsan Lectus Eget</a></h3>
                	</div>
                </div><!-- .element -->
                <div class="stories element col-md-4">
                	<div class="portfolio_item_wrapper">
                        <div class="img_block hover_img">
                            <a href="single_portfolio.html">
                                <img src="static/images/portfolio/3.jpg" alt="" />
                                <div class="item_fadder"></div>
                                <div class="link_ico"><i class="fa fa-link"></i></div>
                            </a>
                        </div>
                        <h3 class="gallery_title"><a href="single_portfolio.html">Etiam Mas Consectetur</a></h3>
                	</div>
                </div><!-- .element -->
                <div class="portraits element col-md-4">
                	<div class="portfolio_item_wrapper">
                        <div class="img_block hover_img">
                            <a href="single_portfolio.html">
                                <img src="static/images/portfolio/4.jpg" alt="" />
                                <div class="item_fadder"></div>
                                <div class="link_ico"><i class="fa fa-link"></i></div>
                            </a>
                        </div>
                        <h3 class="gallery_title"><a href="single_portfolio.html">Nulla Luctus Sagittis</a></h3>
                	</div>
                </div><!-- .element -->
                <div class="fashion element col-md-4">
                	<div class="portfolio_item_wrapper">
                        <div class="img_block hover_img">
                            <a href="single_portfolio.html">
                                <img src="static/images/portfolio/5.jpg" alt="" />
                                <div class="item_fadder"></div>
                                <div class="link_ico"><i class="fa fa-link"></i></div>
                            </a>
                        </div>
                        <h3 class="gallery_title"><a href="single_portfolio.html">Pellentesque Mauris</a></h3>
                	</div>
                </div><!-- .element -->
                <div class="stories element col-md-4">
                	<div class="portfolio_item_wrapper">
                        <div class="img_block hover_img">
                            <a href="single_portfolio.html">
                                <img src="static/images/portfolio/6.jpg" alt="" />
                                <div class="item_fadder"></div>
                                <div class="link_ico"><i class="fa fa-link"></i></div>
                            </a>
                        </div>
                        <h3 class="gallery_title"><a href="single_portfolio.html">Ridiculus Nec Egestas</a></h3>
                	</div>
                </div><!-- .element -->
            </div><!-- .portfolio_block -->
            <div class="clear"></div>
            <div class="col-md-12">
                <div class="load_more_cont"><a href="javascript:void(0);" class="btn_load_more shortcode_button btn_type4">Load more works</a></div>
            </div>
            <script type="text/javascript">
                jQuery(window).load(function(){
                    items_set = [	//Service Data
                    
                        {src : 'static/images/portfolio/7.jpg', url : 'single_portfolio.html', sortcategory: 'portraits', title: 'Cras Vitae Sodales'},
						
						{src : 'static/images/portfolio/8.jpg', url : 'single_portfolio.html', sortcategory: 'fashion', title: 'Sit Amet Egestas'},
						
						{src : 'static/images/portfolio/9.jpg', url : 'single_portfolio.html', sortcategory: 'stories', title: 'Lorem Ipsum Dolor'}								
                        
                    ];
                    jQuery('#list').portfolio_addon({
                        type : 1, // 3 portfolio
                        load_count : 3,
                        items : items_set
                    });
                });
            </script>                                           
    		<!-- //Portfolio -->            	
    	</div>
        <div class="clear"></div>
        <a href="#blog" class="next_section"></a>
    </div>
	<!-- //section content -->            
</section>